import React, { useEffect, useState } from "react";
import weatherApi from "utils/api/weatherApi";

import "assets/less/components/weather.less";

const Wether = () => {
  const [weatherData, setWeatherData] = useState(null);
  useEffect(() => {
    weatherData ||
      weatherApi()
        .then(data => {
          setWeatherData(data);
        })
        .catch(err => {
          setWeatherData(null);
        });
  });

  const handleGetweatherLevelClass = (level) => {
      if(level < 60) {
          return ' air1';
      } else if(level < 120) {
          return ' air2';
      } else {
          return ' air3';
      }
  }

  if (weatherData) {
    return (
        <ul className="weather">
          <li>{weatherData.city}</li>
          <li className="weather-img">
            <img src={require(`assets/images/weather/${weatherData.wea_img}.png`)}alt=""/>
          </li>
          <li>{weatherData.wea}</li>
          <li>{`${weatherData.tem}℃`}</li>
          <li className={"air-level" + handleGetweatherLevelClass(weatherData.air)}><span>{weatherData.air_level}</span></li>
          <li className="weather-tips" title={weatherData.air_tips}>{weatherData.air_tips}</li>
        </ul>
    );
  } else {
    return null;
  }
};

export default Wether;
